<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search">
			<u-search placeholder="请输入产品名" v-model="keyword" :showAction='false' @search='getProducts'></u-search>
		</view>
		<view v-if='products && products.length > 0'>
			<view class="recommend-list">
				<view v-for="(item, index) in products" :key="index" class="recommend-item">
					<view style='display: flex;justify-content: center;'>
						<image class="recommend-img" :src="item.cover" mode="aspectFit" @click="toDetail(item.id)"></image>
					</view>
					<view class="recommend-info">
						<view class="recommend-name">{{ item.name }}</view>
						<view class="recommend-price">¥{{ item.price }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style='padding-top:30vh'>
			<u-empty mode="list" text='暂无搜索结果'>
			</u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				products: [],
				tag: 0,
				categoryId: 0
			}
		},
		onReachBottom() {

		},
		onShow() {
			
		},
		onLoad(options) {
			console.log(options)
			if(typeof(options.keyword) != 'undefined'){
				this.keyword = options.keyword
			}
			if(typeof(options.tag) != 'undefined'){
				this.tag = options.tag
			}
			if(typeof(options.categoryId) != 'undefined'){
				this.categoryId = options.categoryId
			}
			this.getProducts()
		},
		methods: {
			getProducts() {
				
				let store = uni.getStorageSync('store')
				if(store == ''){
					uni.showModal({
						title: '',
						content: '请先选择门店',
						showCancel: false,
						success: () => {
							uni.navigateTo({
								url: '/pages/index/stores'
							})
						}
					})
					return
				}
				let filter = ``
				if(this.keyword.trim() != ''){
					filter = `entity.getStore().getId() == ${store.id} && entity.getSpecification().getProduct().getName() matches '${this.keyword}'`
				}
				if(this.tag > 0 && this.keyword == ''){
					filter = `entity.getStore().getId() == ${store.id} && ${this.tag} in entity.getSpecification().getProduct().getTagIds()`
				}
				if(this.categoryId > 0){
					filter = `entity.getStore().getId() == ${store.id} && entity.getSpecification().getProduct().getCategory().getId() == ${this.categoryId}`
				}
				filter += ` && entity.getEnabled() == true && entity.getSpecification().getProduct().getIsOnSale() == true`
				uni.showLoading()
				this.request.get(`api/store-specifications`, {
					'@filter': filter,
					'@display': `{
						'id': 'entity.getSpecification().getProduct().getId()',
						'name': 'entity.getSpecification().getProduct().getName()',
						'cover': 'entity.getSpecification().getProduct().getCover()',
						'price': 'entity.getSpecification().getPrice()'
					}`,
					'@order': 'entity.specification.product.listOrder,entity.id|ASC',
				}).then((res) => {
					this.products = res.data
					uni.hideLoading()
				})
			},
			toDetail(id) {
				const tmplIds = [
					'uTZLnU0Ltow5L0KwpPfQ5t1YHpnduJKlMOAyg08ntw8'
				];
				uni.requestSubscribeMessage({
					tmplIds: tmplIds,
					success: res => {
						uni.navigateTo({
							url: `/pages/product/detail?id=${id}`
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding:10px;
	}
	
	.recommend-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 15rpx;
	}
	
	.recommend-item {
		width: 42%;
		margin: 15px 4%;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		padding: 10px 0px;
	}
	
	.recommend-img {
		width: 260rpx;
		height: 260rpx;
		border-radius: 20rpx;
	}
	
	.recommend-info {
		padding: 20rpx;
	}
	
	.recommend-name {
		font-size: 28rpx;
		color: #333;
	}
	
	.recommend-price {
		font-size: 26rpx;
		color: #e4393c;
		margin-top: 10rpx;
	}
</style>